<template>
    <div id="containers" ref="cards" data-v-5c8289c0="" @click.self="close()" class="blackfixed">
        <div class="bottompp" ref="carsContent"  >
          <div id="bodyContent" ref="bodyContent"></div>
        </div>
    </div>



</template>

<script>


  import Vue from 'vue'
  import store from '../store'
  export default {

    name: "card",
    props:['width','title','height','props','funCode','callback'],
    data(){
      return{
        centerDialogVisible:true,

      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.render()
    })
    },
    methods:{
      render:function(){
        let vm = this;
        var com = window.getRouter(this.funCode);
        com.component.methods.callback =function (obj={}) {
          if(vm.callback){
            vm.callback(vm.close,obj)
          }
        }
        com.component.methods.close =function () {
          vm.close()
        }
        var app= Vue.extend({
          render:function (createElement) {
            return createElement(com.component,{
              props: vm.props
            });
          },store
        })
        new app().$mount('#bodyContent')
        setTimeout(()=>{
          // document.getElementById('containers').style.opacity="1"
          this.$refs.cards.style.opacity="1"
        // this.$refs.carsContent.style.top="0"

      })

      },


      close(){

        this.$destroy()
        this.$el.remove();

      },

    }
  }
</script>

<style   scoped>
    /*.el-dialog__wrapper{*/
    /*transition: all 200ms;*/
    /*top:-100%;*/
    /*}*/
    .bottompp{
      position: absolute;
      bottom:0;left:0;right:0;
      background: #FFF;
    }
    #bodyContent{
        max-height: 500px;
        overflow: auto;
    }
    .blackfixed{
        background:rgba(0,0,0,.5);
        width:100%;height:100%;
        top:0;
        opacity:0;
        position:fixed;
        left:0;
        z-index:999;
        transition: all 200ms;

    }
    .el-icon-close{font-size:30px;
        position: relative;
        top:-5px;  border-radius: 5px; color:red;}
    .el-dialog__body{padding-top:10px;}
    .el-icon-close:hover{color:red; opacity: .5}
</style>

